<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>英雄百科</title>
  </head>

  <body>
    <div class="main">
      <img
        class="cover"
        src="https://img.crawler.qq.com/lolwebschool/0/JAutoCMS_LOLWeb_f6416138ae858f73e2ca40a11587e17f/0"
      />
      <div class="hero-container">
        <input type="text" class="search" placeholder="检索" />
        <ul class="list">
          <li>
            <img
              src="http://game.gtimg.cn/images/lol/act/img/champion/Annie.png"
              alt=""
            />
            <p>安妮</p>
          </li>
        </ul>
      </div>
    </div>
    <div id="infoModal" class="modal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">黑暗之女安妮</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <div class="info">
              <img
                src="http://game.gtimg.cn/images/lol/act/img/champion/Annie.png"
                class="icon img-thumbnail"
                alt="..."
              />
              <div class="progress-box">
                <div class="progress">
                  <div
                    class="attack progress-bar bg-success"
                    style="width: 25%"
                  >
                    攻击:
                  </div>
                </div>
                <div class="progress">
                  <div
                    class="defense progress-bar bg-info"
                    role="progressbar"
                    style="width: 50%"
                  >
                    防御:
                  </div>
                </div>
                <div class="progress">
                  <div
                    class="magic progress-bar bg-warning"
                    role="progressbar"
                    style="width: 75%"
                  >
                    魔法:
                  </div>
                </div>
                <div class="progress">
                  <div
                    class="difficulty progress-bar bg-danger"
                    role="progressbar"
                    style="width: 100%"
                  >
                    难度:
                  </div>
                </div>
              </div>
            </div>
            <p class="p1">
              拥有危险夺命的能力，却长着一幅小大人儿的可爱模样，这就是掌握深不可测占火魔法的女孩——安妮。安妮生活在诺克萨斯北边的山脚下，但即便是在这种地方，她也依然是魔法师中的异类。她与火焰的紧密关系与生俱来——最初那些火焰是伴随着喜怒无常的冲动情绪出现的，后来她学会了如何掌握这些“好玩的小把戏”。其中，安妮最喜欢的就是她召唤亲爱的泰迪熊提伯斯——那头狂野的守护火兽。如今安妮已经迷失在了永恒的天真里，她在黑暗森林中游荡，寻觅着能陪自己玩耍的人。
            </p>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="./lib/axios.js"></script>
  <script src="./lib/bootstrap.min.js"></script>
  <script>
    const list = document.querySelector('.list')
    // 全部英雄
    function getHeroInfo() {
      axios.get('https://autumnfish.cn/api/lol/search').then(res => {
        console.log(res)
        const datalist = res.data.data
        const heroStr = datalist
          .map(item => {
            return `
          <li>
            <img src="${item.icon}" alt="" data-id=${item.heroId} />
            <p>${item.title}</p>
          </li>
          `
          })
          .join('')
        list.innerHTML = heroStr
      })
    }
    getHeroInfo()
    // 搜索
    const search = document.querySelector('.search')

    search.addEventListener('input', function () {
      const q = search.value
      if (q) {
        axios
          .get('https://autumnfish.cn/api/lol/search', { params: { q } })
          .then(res => {
            const datalist = res.data.data || []
            const heroStr = datalist
              .map(item => {
                return `
          <li>
            <img src="${item.icon}" alt="" data-id=${item.heroId} />
            <p>${item.title}</p>
          </li>
          `
              })
              .join('')
            list.innerHTML = heroStr
          })
      } else {
        alert('内容不能为空')
      }
    })

    // 详情
    // const dialog = document.querySelector('.modal-dialog');

    const modalDom = document.querySelector('.modal')
    const modal = new bootstrap.Modal(modalDom)

    list.addEventListener('click', function (e) {
      if (e.target.tagName === 'IMG') {
        console.log(e.target.dataset.id)

        const id = e.target.dataset.id
        axios
          .get('https://autumnfish.cn/api/lol/info', { params: { id } })
          .then((res) => {
            console.log(res);
            const iban = res.data.data.hero
            document.querySelector(
              '.modal-title'
            ).innerHTML = `${iban.name}${iban.title}`
            document.querySelector('.p1').innerHTML = `${iban.shortBio}`
            document.querySelector('.icon').src = `${iban.icon}`
            document.querySelector('.attack').style.width = `${
              iban.attack * 10
            }%`
            document.querySelector('.defense').style.width = `${
              iban.defense * 10
            }%`
            document.querySelector('.magic').style.width = `${iban.magic * 10}%`
            document.querySelector('.difficulty').style.width = `${
              iban.difficulty * 10
            }%`
          })
        modal.show()
      }
    })
  </script>
</html>
